<template>
  <div class="shopping-cart fixed-header fixed-footer">
    <x-header>方案内容</x-header>
    <div class="top-actions">
      <div class="action">
        <router-link to="/daletou" tag="b"><i class="iconfont icon-plus"></i> 手动添加</router-link>
        <b @click="gen(1)"><i class="iconfont icon-dice1"></i> 机选1注</b>
        <b @click="gen(5)"><i class="iconfont icon-dice5"></i> 机选5注</b>
      </div>
      <div class="text-grey py-1 bb-l">
        <b>距{{current.lotteryNo}}期截止：{{current.endTime}}</b>
      </div>
    </div>

    <transition-group class="mx-3 relative" name="cart" tag="div">
      <div class="cart-item" :key="item.id" v-for="(item, index) in cart">
        <div class="desc">{{item.bold ? '胆拖' : '普通'}} {{item.bets}} 注 {{item.bets * (chase ? 3 : 2)}} 元</div>
        <div class="bet tips">
          <i class="iconfont icon-close-o" @click="del(index)"></i>
          <em v-html="stringify(item)"></em>
        </div>
      </div>
    </transition-group>


    <div class="text-grey m-3" style="padding-left: 3.5rem">
      <label class="ui-check"><input type="checkbox" v-model="agree"><i></i> 我已阅读并同意</label>
      <a @click.prevent="toggle('dialog')" href>《服务协议》</a>
      <a class="float-right" @click="empty">清空列表</a>
    </div>

    <popup v-model="dialog" class="dialog-lg dialog-flex" style="height: 75%">
      <div class="scroll-wrapper flex-column grow">
        <iframe class="grow" src="http://r209.chaoshenwan.com/lottery/public/faq/agreement.html"></iframe>
      </div>
      <a class="btn btn-lg btn-danger rad-0" @click="toggle('dialog')">确定</a>
    </popup>

    <checkout :disabled="!agree || !bets" :bets="bets" :money="chase ? 3 : 2" @checkout="checkout">
      <label slot="left" class="ui-check ml-3"><input type="checkbox" v-model="chase"><i></i> 追加</label>
    </checkout>
  </div>
</template>

<script>
import { betContent, bets, gen } from './calculator'
import { get, id, set } from '../../utils/stoage'
import { pad } from '../../utils/filters'
import { Dialog, Popup } from 'vant'
import Checkout from '../widgets/checkout'
import http, { checkout } from '../../http'

function genToCart (num, cart) {
  for (let i = 0; i < num; i++) {
    var groups = gen()
    cart.unshift({groups, bets: bets(groups), id: id()})
  }
  set('daletou.cart', cart)
}

export default {
  components: {Dialog, Checkout, Popup},
  name: 'daletou-cart',
  data: () => ({
    current: {},
    dialog: false,
    chase: false,
    agree: true,
    cart: []
  }),
  beforeRouteEnter (to, from, next) {
    var cart = get('daletou.cart', [])
    var {g} = to.query
    g && genToCart(g, cart) // 机选投注
    http.post('/digital/daletou/current').then(current => {
      next(vm => {
        vm.current = current
        vm.cart = cart
      })
    })
  },
  methods: {
    checkout (times) {
      var vm = this
      checkout.call(this, '/digital/daletou/bet', 'daletou', {
          lotteryNo: this.current.lotteryNo,
          betContent: betContent(this.cart),
          additional: this.chase,
          times
        },
        function () {
          vm.cart = set('daletou.cart', [])
        })
    },
    stringify (item) {
      var [q, w, e, r] = item.groups
      if (item.bold) {
        var back = e && e.length ? `(${e.map(pad).join(' ')}) ${r.map(pad).join(' ')}` : `${r.map(pad).join(' ')}`
        return `<b class="mr-3">(${q.map(pad).join(' ')}) ${w.map(pad).join(' ')}</b><a>${back}</a>`
      } else {
        return `<b class="mr-3">${q.map(pad).join(' ')}</b><a>${w.map(pad).join(' ')}</a>`
      }
    },
    toggle (prop) { this[prop] = !this[prop] },
    empty () {
      var vm = this
      this.$dialog.confirm({
        title: '清空',
        message: '您确定要清空当前的投注内容？'
      }).then(() => {
        vm.cart = set('daletou.cart', [])
      })
    },
    gen (num) {
      genToCart(num, this.cart)
    },
    del (index) {
      this.cart.splice(index, 1)
      set('daletou.cart', this.cart)
    }
  },
  computed: {
    bets () {
      return this.cart.reduce((prev, curr) => prev + curr.bets, 0)
    }
  }
}
</script>
